<template>
    <q-page padding class="table-report-page">
        <q-toolbar class="fixed-top">
            <q-toolbar-title>
                会员报告
            </q-toolbar-title>
            <q-space />
            <q-btn label="Back" @click="onBack" color="primary" />
        </q-toolbar>

        <div>
            <h3>{{ user.名称 }}</h3>

            <h4>与您有共同客户群体的会员</h4>
            <q-table :rows="commonClients" :columns="commonClientsColumns" row-key="id" :rows-per-page-options="[20]" />

            <h4>能提供给您合作资源的会员</h4>
            <q-table :rows="matchingResources" :columns="matchingResourcesColumns" row-key="id"
                :rows-per-page-options="[20]" />

            <h4>需要您周边资源的会员</h4>
            <q-table :rows="resourceMatches" :columns="resourceMatchesColumns" row-key="id"
                :rows-per-page-options="[20]" />
        </div>

    </q-page>

</template>

<script>
import { ref } from 'vue';
import { exportToExcel, getMembers } from 'src/js/api'; // 假设有一个API可以获取会员信息

export default {
    name: "MemberReport",

    data() {
        return {
            user: JSON.parse(localStorage.getItem("user"))
        }
    },
    setup() {
        const commonClients = ref([]);
        const matchingResources = ref([]);
        const resourceMatches = ref([]);
        const memberData = ref([]); // 假设这里存储了您提供的会员信息

        const commonClientsColumns = [
            { name: '名称', label: '会员名称', align: 'left', field: '名称' },
            { name: '行业', label: '行业', align: 'left', field: '行业' },
            { name: '目标客户', label: '目标客户', align: 'left', field: 'targetClient' }
        ];

        const matchingResourcesColumns = [
            { name: '名称', label: '会员名称', align: 'left', field: '名称' },
            { name: '行业', label: '行业', align: 'left', field: '行业' }
        ];

        const resourceMatchesColumns = [
            { name: '名称', label: '会员名称', align: 'left', field: '名称' },
            { name: '行业', label: '行业', align: 'left', field: '行业' }
        ];

        const fetchMemberData = async () => {
            // 获取当前会员信息
            const currentMember = JSON.parse(localStorage.getItem("user"));
            // ... 其他数据获取逻辑 ...
            let res = await exportToExcel(currentMember.chapter)
            memberData.value = res.data.data.data.rawData.filter((member) => {
                return currentMember.名称 != member.名称
            })


            // 进行匹配筛选
            memberData.value.forEach(member => {
                const top3Clients = member.TOP3客户.split(',');
                const ownedResources = member.拥有的资源.split(',');
                const commonClientsNotInSub = member.共同客户未进分会.split(',');

                // 匹配条件 1
                if (top3Clients.some(client => currentMember.TOP3客户.includes(client))) {
                    let res = JSON.parse(JSON.stringify(member));
                    res.targetClient = top3Clients.find(client => currentMember.TOP3客户.includes(client))
                    commonClients.value.push(res);
                }

                // 匹配条件 2
                if (ownedResources.some(resource => currentMember.共同客户未进分会.includes(resource))) {
                    matchingResources.value.push(member);
                }

                // 匹配条件 3
                if (commonClientsNotInSub.some(client => currentMember.拥有的资源.includes(client))) {
                    resourceMatches.value.push(member);
                }
            });
        };

        fetchMemberData();

        return {
            commonClients,
            matchingResources,
            resourceMatches,
            commonClientsColumns,
            matchingResourcesColumns,
            resourceMatchesColumns
        };
    },

    methods: {
        onBack() {
            this.$router.back()
        }
    }
};
</script>


<style lang="scss">
.table-report-page {
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding-top: 50px !important; // 为固定工具栏留出空间
}

.fixed-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: white; // 或者与你的主题匹配的颜色
    padding: 0 16px;
}

.toggle-container {
    position: sticky;
    top: 50px; // 工具栏高度
    z-index: 99;
    background: white; // 或者与你的主题匹配的颜色
    padding: 8px 0;
}

.table-container {
    flex: 1;
    overflow: hidden;
    position: relative;

    .my-sticky-header-table {
        height: calc(100vh - 120px); // 减去工具栏和toggle的高度

        .q-table__middle {
            max-height: 100%;
            overflow: auto;
        }

        thead tr th {
            position: sticky;
            z-index: 1;
        }

        /* 防止表头阴影被裁切 */
        thead tr:last-child th {
            top: 0;
        }
    }
}


.q-table {
    .q-pagination {
        .q-btn {
            color: #424242; // 深灰色按钮文字
            background: #f5f5f5; // 浅灰色背景

            &.q-btn--active {
                background-color: #1976d2; // primary 颜色
                color: white;
            }

            &:hover:not(.q-btn--active) {
                background-color: #e0e0e0;
            }
        }
    }
}

// 如果需要调整按钮间距
.q-pagination {
    .q-btn {
        margin: 0 2px; // 调整按钮间距
    }
}

.highlighted-row {
    background-color: rgba(25, 118, 210, 0.1);
    transition: background-color 0.5s ease;
}
</style>